import 'package:flutterappyidongjingfen/Extension/touch_callback.dart';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutterappyidongjingfen/LineChart/chart_utils.dart';
import 'package:flutterappyidongjingfen/Views/TabPageViews.dart';

class GroupBusinessPage extends StatefulWidget{
  @override
  GroupBusinessState createState() => GroupBusinessState();
}

class GroupBusinessState extends State<GroupBusinessPage>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Color.fromRGBO(11, 13, 28, 1),
      body: groupBusinessPage(context),
    );
  }
}


 Widget groupBusinessPage(BuildContext context){
  return Container(
      margin: EdgeInsets.only(bottom: 0,top: 10,left: 5,right: 5),
      child: ListView(
        children: <Widget>[
          Container(
//            margin: EdgeInsets.only(left: 5,right: 5),
            child: titleCard("综拓推保险(亿)","200","同比 +100亿"),
          ),
          Container(
            child: Card(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              child: buttonSection,
              color: Color(0xFF23283C),
            ),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(15, 10, 0, 10),
            child: Text("地区分会累计业绩达成",style: TextStyle(fontSize: 16,color: Colors.white)),
          ),
          cardsRow(),
          cardChart(context),
        ],
      ),
  );
 }


Widget buttonSection = Container(
  margin: EdgeInsets.fromLTRB(0, 20, 0, 20),
  child: Stack(
    children: <Widget>[
      Row(

        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          buildButtonColumn(Colors.blue, Image.asset("images/icon_SameFinancical_line.png"), '标杆竞赛'),
          buildButtonColumn(Colors.blue, Image.asset("images/icon_groupBusiness_quekoujiankong.png"), '缺口监控'),
          buildButtonColumn(Colors.blue, Image.asset("images/icon_groupBusiness_bankAchievement.png"), '银行业绩'),
          buildButtonColumn(Colors.blue, Image.asset("images/icon_SameFinancical_kpi.png"), '团金业绩'),
        ],
      )
    ],
  ),
);

Widget cardsRow(){
  return Container(
    child:Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        cardsColum1(),
        cardsColum2(),
      ],
    ),
  );
}

Column cardsColum1(){

  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      card(title: "综拓推保险", count: 2.4,compare:23.6,compareDate: "同比"),
      card(title: "综拓推银存款", count: 1006.6,compare:23.6,compareDate: "较年初"),
    ],
  );
}

Column cardsColum2(){

  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      card(title: "综拓推金融", count: 2.4,compare:23.6,compareDate: "同比"),
      card(title: "综拓推租赁", count: 2.4,compare:-0.3,compareDate: "同比"),
    ],
  );
}


class card extends StatelessWidget{
  String title;
  double count;
  double compare;
  String compareDate;

  card(
      {@required this.title, @required this.count, @required this.compare,@required this.compareDate});

  @override
  Widget build(BuildContext context) {

    return Container(
      width: (MediaQuery.of(context).size.width - 10) / 2 ,
      height: (MediaQuery.of(context).size.width - 10) / 2 - 5,
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        color: Color(0xFF23283C),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Padding(padding: EdgeInsets.only(bottom: 22)),
            Text(title,style: TextStyle(fontSize: 14.0,color: Colors.white)),
            Padding(padding: EdgeInsets.only(bottom: 25)),
            RichText(text: TextSpan(
              text: "${count}",
              style: TextStyle(fontSize: 42.0,color: Color(0xFF119CFD)),
              children: [
                TextSpan(
                  text: "亿",
                  style: TextStyle(fontSize: 15,color: Color(0xFF119CFD)),
                ),
              ],
            )),
            Padding(padding: EdgeInsets.only(bottom: 20)),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                  Text(compareDate,style: TextStyle(fontSize: 13.0,color: Color(0xFF7981A0))),
                  Container(
                    child: Row(
                      children: <Widget>[
                        Icon(compare > 0 ? Icons.arrow_upward : Icons.arrow_downward,color: compare > 0 ? Color(0xFFFF3F77) : Color(0xFF1AEFBA),size: 16),
                        Text("${compare.abs()}%",style: TextStyle(fontSize: 14.0,color: compare > 0 ? Color(0xFFFF3F77) : Color(0xFF1AEFBA)),)
                      ],
                    ),
                  )
              ],
            ),
          ],
        ),
      ),
    );
  }


}


Widget cardChart(BuildContext context){
  return Container(
    height: 1178/2.0,
    child: Card(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(9)),
      color: Color(0xFF23283C),
      child: Column(
        children: <Widget>[
          Padding(padding: EdgeInsets.only(bottom: 25)),
          Text("综拓推保险-产品方",style: TextStyle(fontSize: 14,color: Colors.white70)),
          postChart(context,1),
          Padding(padding: EdgeInsets.only(bottom: 25)),
          Text("综拓推保险-产品方",style: TextStyle(fontSize: 14,color: Colors.white70)),
          ///2表格
          postChart(context,2),
          ///底部蓝色和黄色小块
          bottomBlockWidget(),
          Padding(padding: EdgeInsets.only(bottom: 10)),
          dividerLine(),
          Padding(padding: EdgeInsets.only(bottom: 12)),
          bottomQuestion()
        ],
      ),
    ),
  );
}

//圆柱图
Widget postChart(BuildContext context,int index){
  double width = MediaQuery.of(context).size.width - 40;
  double startX =  40 ;//预留出y轴刻度值所占的空间
  double xWidth = (width -  startX - 60)/3;
  double bottom = 13.0;
  return Stack(

    children: <Widget>[
      baseChart(context),
      Positioned(
        bottom: bottom,
        left: startX,
        width: 40,
        height: 200,
        child: drawPost("产险",index == 1 ? 80 : 90,index == 1 ? 60 : 110),
      ),
      Positioned(
        bottom: bottom,
        left: xWidth + startX,
        width: 40,
        height: 200,
        child: drawPost("养老险",index == 1 ? 70 : 30,index == 1 ? 40 : 20),
      ),
      Positioned(
        bottom: bottom,
        left: 2*xWidth + startX,
        width: 40,
        height: 200,
        child: drawPost("健康险",index == 1 ? 20 : 40,index == 1 ? 120 : 90),
      ),
      Positioned(
        bottom: bottom,
        left: 3*xWidth + startX,
        width: 40,
        height: 200,
        child: drawPost("好医生",index == 1 ? 130 : 55,index == 1 ? 75 : 90),
      ),
    ],
  );
}

// 保险产品方和渠道方的表格
Widget baseChart(BuildContext context){
  return Container(
    margin: EdgeInsets.only(top: 5),
    child: Stack(
      children: <Widget>[
        ChartLine(
//        backgroundColor: Colors.red,
          chartBeans: [
            ChartBean(x: '', y: 10.0,color: Colors.green),
            ChartBean(x: '', y: 7.5,color: Colors.red),
            ChartBean(x: ' ', y: 5),
            ChartBean(x: '', y: 2.5),
            ChartBean(x: '', y: 0),

          ],
          isShowHintX:true,
          hintXLineWidth: 0.5,
          hintXColor: Colors.white,
          size: Size(MediaQuery.of(context).size.width - 20,
              200),
          isCurve: true,
          lineWidth: 2.5,
          lineColor: Colors.transparent,
          fontColor: Colors.white70,
          xyColor: Colors.transparent,
          isShowBottomtHintX: true,
          xTextPadding: 5,
          numberOfhintX: 5,
          fontSize: 11,
          yNum: 4,
          isReverse: false,
          isCanTouch: true,
          isShowPressedHintLine: true,
          pressedPointRadius: 4,
          isShowXyRuler: false,
          pressedHintLineWidth: 0.5,
          pressedHintLineColor: Colors.white,
          duration: Duration(milliseconds: 2000),
        ),
        Container(
//          color: Colors.red,
            margin: EdgeInsets.fromLTRB(14, 10, 0, 0),
            child: Text("亿",style: TextStyle(fontSize:11,color: Colors.white70 ),textAlign: TextAlign.left,)
        ),
      ],
    ),
  );
}

Widget drawPost(String title,double value1,double value2){
  return Column(
    mainAxisAlignment: MainAxisAlignment.end,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            SizedBox(
              width: 6,
              height: value1,
              child: Container(
                decoration: ShapeDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFF00C6FB),Color(0xFF006CED)],
                  ),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3)),
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(right: 5),),
            SizedBox(
              width: 6,
              height: value2,
              child: Container(
                decoration: ShapeDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFFFAD961),Color(0xFFF8A03D)],
                  ),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3)),
                ),
              ),
            ),
          ],
        ),
      ),
      Padding(padding: EdgeInsets.only(bottom: 5)),
      Text(title,style: TextStyle(fontSize: 11,color: Colors.white70))
    ],
  );
}

//底部蓝色和黄色小块
Widget bottomBlockWidget(){
  return Container(
    child: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            width: 12.5,
            height: 7.5,
            child: Container(
              decoration: ShapeDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Color(0xFF119CFD),Color(0xFF119CFD)],
//                  colors: [Color(0xFFF8A03D),Color(0xFFF8A03D)],
                ),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
              ),
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 3)),
          Text("规模",style: TextStyle(fontSize: 11.0,color: Colors.white70),),
          Padding(padding: EdgeInsets.only(left: 10)),
          SizedBox(
            width: 12.5,
            height: 7.5,
            child: Container(
              decoration: ShapeDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Color(0xFFF3CE30),Color(0xFFF3CE30)],
                ),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
              ),
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 3)),
          Text("同比规模",style: TextStyle(fontSize: 11.0,color: Colors.white70),)
        ],
      ),
    ),
  );
}